Day 12：Things Unshift But Add To Be More

第 11 屆 iThome 鐵人賽

DAY 14

Modern Web

陣列大亂鬥系列第 14 篇

11th鐵人賽

Hina Hina

團隊Amos的推坑教2.0

2019-09-29 21:48:08

763 瀏覽

分享至

前言

良心話，今天從字義上來看，根本不知道它要做啥。唯一可以說得通的是，它其實是運用反意詞的概念，來表達跟上一篇文章中 shift 相反的行為。

在之前的介紹中，有說明了 shift 就是從最前方剔除一個項目，並進行回傳。也因此，它相反的意思就是：從最前方，加入一個以上項目。這樣的功能。

緊接著，我們就來看相關的內容吧！！

Unshift

Javascript

首先進入的是 JS 的 unshift() 部分。第一個概念就是，此方法會從陣列的最前方插入一個以上的元素，概念跟之前說過的 push() 有點像，只是 push() 是從最末端，unshift() 是從最前端，然後同樣回傳處理後的陣列長度：

// javascript

// push() 範例
const ary = [1, 2, 3, 4, 5]
const pushAry = ary.push('a', 'b', 'c')

console.log(`回傳值：${pushAry}，陣列：${ary}`)

// > 回傳值：8，陣列：[1,2,3,4,5,a,b,c]





// unshift() 範例
const bry = [1, 2, 3, 4, 5]
const unshiftAry = bry.unshift('a', 'b', 'c')

console.log(`回傳值：${unshiftAry}，陣列：${bry}`)

// > 回傳值：8，陣列：[a,b,c,1,2,3,4,5]

不過，也因為 unshift() 是從最前端進行插值的動作，所以它不像 push() 有 ary.length 可以當作替代解決方案。

另外，因為它是採用從前方插值的動作，同時也會影響到已經存在的索引值：

// javascript

const ary = [1, 2, 3, 4, 5]

ary.forEach((item, i) => {
    console.log(`${i}：${item}`)
})

// > 0：1
// > 1：2
// > 2：3
// > 3：4
// > 4：5


ary.unshift('a', 'b', 'c')
ary.forEach((item, i) => {
    console.log(`${i}：${item}`)
})

// > 0：a
// > 1：b
// > 2：c
// > 3：1
// > 4：2
// > 5：3
// > 6：4
// > 7：5

PHP

接下來來看 PHP 的部分。

一樣，我們可以把它看成是作用方向相反的 array_push()，同樣是插入一個以上的值，只是 array_push() 是從末端，array_unshift() 是從前端。同樣也是回傳作用後的陣列長度：

// php

<?
    // array_push() 範例
    $ary = array(1, 2, 3, 4, 5);
    $pushReturn = array_push($ary, 'x', 'y', 'z');

    echo '回傳值：' . $pushReturn;
    print_r($ary);

    // > 回傳值：8
    // > array( [0] => 1 [1] => 2 [2] => 3 [3] => 4 [4] => 5 [5] => x [6] => y [7] => z )
?>





<?
    // array_unshift() 範例
    $ary = array(1, 2, 3, 4, 5);
    $unshiftReturn = array_unshift($ary, 'x', 'y', 'z');

    echo '回傳值：' . $unshiftReturn;
    print_r($ary);

    // > 回傳值：8
    // > array ( [0] => x [1] => y [2] => z [3] => 1 [4] => 2 [5] => 3 [6] => 4 [7] => 5 )
?>

因應 array_unshift() 是從前端插值的特性，它會針對數字型的 key 值重新進行編號，文字型則不受影響：

// php

<?
    $ary = array(
        "10" => "A",
        "apple" => "B",
        "peach" => "C",
        "5" => "D",
        "orange" => "E"
    );

    foreach($ary as $key => $value) {
        echo  $key . ' => ' . $value . '<br/>';
    }
    // > 10 => A
    // > apple => B
    // > peach => C
    // > 5 => D
    // > orange => E


    array_unshift($ary, ('20' => 'X'), 'Y', ('kiwi' => 'Z'));

    foreach($ary as $key => $value) {
        echo  $key . ' => ' . $value . '<br/>';
    }
    // > 0 => X
    // > 1 => Y
    // > 2 => Z
    // > 3 => A
    // > apple => B
    // > peach => C
    // > 4 => D
    // > orange => E
?>

比較要注意的地方是，此方法只接受純值，不接受帶有 key 值的元素。

比較

標題\分類	JS	PHP
對象	array	array
功能	從前方插值	從前方插值
元素數量	一個以上	一個以上的純值
陣列長度	增加	增加
回傳值	作用後的陣列長度	作用後的陣列長度
特性	索引值重新編號	針對數字型 key 值從零開始重新編號